
<div class="m-l nav navbar-nav m-t block" >
	<span> 产品管理 ></span>
	<span> 设备管理 ></span>
	<span> 列表</span>       
</div>


<div class="m-t-lg">
  <div class="wrapper-sm">
	<div class="panel panel-default">
		<div class="panel-body">
			<div style="border-color: #e5e5e5;padding: 10px;background-color: #e5e5e5">
				<div class="row">
					<div class="col-md-2">
						<div style="margin-top: 10px;">设备总数：324台</div>
					</div>
					<div class="col-md-6">
						<div class="input-group">
					      <input type="text" class="form-control" placeholder="设备ID...">
					      <span class="input-group-btn">
					        <button class="btn btn-default" type="button">搜索</button>
					      </span>
					    </div>
					</div> 
					<div class="col-md-4" style="text-align: right">
						<button class="btn btn-info" (click)="btype=1;myModal.show()">
							新增
						</button>
					</div>			
				</div>
			</div>
			<div class="table-responsive">
			<table class="table" style="word-break:break-all;word-wrap:break-word">
				<thead>
					<tr>
						<th>设备编号</th>
	   					<th>产品名称</th>
	   					<th>剩余流量</th>
	   					<th>群组位置</th>
	   					<th>模块编号</th>
	   					<th>所属渠道商</th>
	   					<th>维保人员</th>
	   					<th>在离线状态</th>
	   					<th>占用数量</th>
	   					<th>空闲数量</th>
	   					<th>故障数量</th>
	   					<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr *ngFor="let devdata of devData">
	   					<td>{{devdata.locker_device_id}}</td>
	   					<td>{{devdata.locker_category}}</td>
	   					<td>--</td>
	   					<td>{{devdata.locker_address}}</td>
	   					<td>{{devdata.locker_channel_trader}}</td>
	   					<td>{{devdata.locker_maintenance}}</td>	   					
	   					<td>--</td>
	   					<td>--</td>
	   					<td>--</td>
	   					<td>--</td>
	   					<td>--</td>
	   					<td>
	   						<button class="btn btn-xs btn-info"  [routerLink]="['devinfo',devdata.locker_device_id]">详情</button>
	   						<!-- <button class="btn btn-xs btn-danger" (click)="deleteModal(devdata.locker_device_id)">删除</button> -->
	   					</td>
					</tr>
				</tbody>
			</table>
			</div>
			<app-pagination [pageModel]="pageModel" (pageChanged)="getAll($event)"></app-pagination>
		</div>
	</div>
  </div>
</div>


<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 800px">
      <div class="modal-content">
		  <div class="modal-header">
		    <h4 class="modal-title" *ngIf="btype==1">新增设备</h4>
		    <h4 class="modal-title" *ngIf="btype==2">删除设备</h4>
		   <!--  <button class="close" aria-label="Close" (click)="closeModal()">
		      <span aria-hidden="true">&times;</span>
		    </button> -->
		  </div>
		  <div class="modal-body">
		    <form class="form-horizontal" *ngIf="btype==1">
		        <div class="form-group row" >
		          <label class="col-sm-3  control-label" style="text-align: right">产品名称</label>
		          <div class="col-sm-7">
		            <!-- <input type="text"  class="form-control" placeholder="请输入种类" name="locker_category" [(ngModel)]='locker_category'  required=""> -->
		            <select class="form-control" name="df" [(ngModel)]='product_id'>
		            	<option *ngFor="let product of productdata" value="{{product.id}}">{{product.product_name}}</option>
		            </select>
		            
		          </div>
		          <!-- <div class="col-sm-2" style="color:red;margin-top: 10px;">
		            <p [hidden]="locker_category">必填</p>
		          </div> -->
		        </div>
		        <div class="form-group row" >
		          <label class="col-sm-3  control-label" style="text-align: right">模块id</label>
		          <div class="col-sm-7">
		            <input type="text"  class="form-control" placeholder="请输入设备id" name="locker_device_id" [(ngModel)]='locker_device_id'  required="">
		          </div>
		          <div class="col-sm-2" style="color:red;margin-top: 10px;">
		            <p [hidden]="locker_device_id">必填</p>
		          </div>
		        </div> 
		        <div class="form-group row" >
		          <label class="col-sm-3  control-label" style="text-align: right">详细地址</label>
		          <div class="col-sm-7">
		            <input type="text"  class="form-control" placeholder="请输入详细地址" name="locker_address" [(ngModel)]='locker_address' >
		          </div>		         
		        </div>   
		        <div class="form-group row" >
		          <label class="col-sm-3  control-label" style="text-align: right">所属渠道商</label>
		          <div class="col-sm-7">
		            <select [(ngModel)]='locker_channel_trader' class="form-control" name="locker_channel_trader">
		            	<option>--请选择--</option>
		            	<option>xxxx</option>
		            	<option>yyyy</option>
		            </select>
		          </div>		         
		        </div> 
		        <div class="form-group row" >
		          <label class="col-sm-3  control-label" style="text-align: right">维保人员</label>
		          <div class="col-sm-7">
		            <select [(ngModel)]='locker_maintenance' class="form-control" name="locker_maintenance">
		            	<option>--请选择--</option>
		            	<option>zzzz</option>
		            	<option>nnnn</option>
		            </select>
		          </div>		         
		        </div>       
		        
		    </form>
		    <div *ngIf="btype==2">
		    	<div style="background-color: #e5e5e5;padding: 10px;border-radius: 5px;">
		    		<h4>确定要删除该<strong>ID:{{selectedId}}</strong>设备嘛？</h4>
		    	</div>
		    </div>
		  </div>
		  <div class="modal-footer">
		    <button class="btn btn-info confirm-btn" (click)="savedata()" [disabled]="!locker_device_id" *ngIf="btype==1">保存</button>
		    <button class="btn  btn-danger" (click)="deldata()" *ngIf="btype==2">确定</button>		  
		    <button class="btn  confirm-btn " (click)="myModal.hide();cancel();">取消</button>
		  </div>
		</div>
     
    </div>
  </div>
</div>